<template>
  <a-card :bordered="false" class="card-area">
    <div :class="advanced ? 'search' : null">
      <!-- 搜索区域 -->
      <a-form layout="horizontal">
        <a-row >
          <div :class="advanced ? null: 'fold'">
            <a-col :md="12" :sm="24" >
              <a-form-item
                label="名称"
                :labelCol="{span: 4}"
                :wrapperCol="{span: 18, offset: 2}">
                <dept-input-tree @change="handleUserChange"
                                 ref="deptTree">
                </dept-input-tree>
              </a-form-item>
            </a-col>
          </div>
          <span style="float: right; margin-top: 3px;">
            <a-button type="primary" @click="search">查询</a-button>
            <a-button style="margin-left: 8px" @click="reset">重置</a-button>
             <a @click="toggleAdvanced" style="margin-left: 8px">
              {{advanced ? '收起' : '展开'}}
              <a-icon :type="advanced ? 'up' : 'down'" />
            </a>
          </span>
        </a-row>
      </a-form>
    </div>
    <div>
      <div class="operator">
        <a-button type="primary" ghost @click="add" v-hasPermission="['currency:saveUpdate']">充值</a-button>
      </div>
      <!-- 表格区域 -->
      <a-table ref="TableInfo"
               :columns="columns"
               :rowKey="record => record.userId"
               :dataSource="dataSource"
               :pagination="pagination"
               :loading="loading"
               :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
               :scroll="{ x: 900 }"
               @change="handleTableChange">
        <template slot="email" slot-scope="text, record">
          <a-popover placement="topLeft">
            <template slot="content">
              <div>{{text}}</div>
            </template>
            <p style="width: 150px;margin-bottom: 0">{{text}}</p>
          </a-popover>
        </template>
      </a-table>
    </div>
  </a-card>
</template>

<script>
import RangeDate from '@/components/datetime/RangeDate'

export default {
  name: 'currencyList',
  components: {},
  data () {
    return {
      queryParams: {},
      filteredInfo: null,
      sortedInfo: null,
      paginationInfo: null,
      dataSource: [],
      selectedRowKeys: [],
      loading: false,
      pagination: {
        pageSizeOptions: ['10', '20', '30', '40', '100'],
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) => `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
      }
    }
  },
  computed: {
    columns () {
      let {sortedInfo, filteredInfo} = this
      sortedInfo = sortedInfo || {}
      filteredInfo = filteredInfo || {}
      return [{
        title: '用户名',
        dataIndex: 'username',
        sorter: true,
        sortOrder: sortedInfo.columnKey === 'username' && sortedInfo.order
      }, {
        title: '性别',
        dataIndex: 'ssex',
        customRender: (text, row, index) => {
          switch (text) {
            case '0':
              return '男'
            case '1':
              return '女'
            case '2':
              return '保密'
            default:
              return text
          }
        },
        filters: [
          {text: '男', value: '0'},
          {text: '女', value: '1'},
          {text: '保密', value: '2'}
        ],
        filterMultiple: false,
        filteredValue: filteredInfo.ssex || null,
        onFilter: (value, record) => record.ssex.includes(value)
      }, {
        title: '邮箱',
        dataIndex: 'email',
        scopedSlots: {customRender: 'email'},
        width: 100
      }, {
        title: '部门',
        dataIndex: 'deptName'
      }, {
        title: '电话',
        dataIndex: 'mobile'
      }, {
        title: '状态',
        dataIndex: 'status',
        customRender: (text, row, index) => {
          switch (text) {
            case '0':
              return <a-tag color="red">锁定</a-tag>
            case '1':
              return <a-tag color="cyan">有效</a-tag>
            default:
              return text
          }
        },
        filters: [
          {text: '有效', value: '1'},
          {text: '锁定', value: '0'}
        ],
        filterMultiple: false,
        filteredValue: filteredInfo.status || null,
        onFilter: (value, record) => record.status.includes(value)
      }, {
        title: '创建时间',
        dataIndex: 'createTime',
        sorter: true,
        sortOrder: sortedInfo.columnKey === 'createTime' && sortedInfo.order
      }, {
        title: '操作',
        dataIndex: 'operation',
        scopedSlots: {customRender: 'operation'}
      }, {
        title: '冥币数量',
        dataIndex: 'total'
      }]
    }
  },
    mounted () {
	  this.fetch()
	},
	methods: {
		fetch (params = {}) {
		  // 显示loading
		  this.loading = true
		  if (this.paginationInfo) {
		    // 如果分页信息不为空，则设置表格当前第几页，每页条数，并设置查询分页参数
		    this.$refs.TableInfo.pagination.current = this.paginationInfo.current
		    this.$refs.TableInfo.pagination.pageSize = this.paginationInfo.pageSize
		    params.pageSize = this.paginationInfo.pageSize
		    params.pageNum = this.paginationInfo.current
		  } else {
		    // 如果分页信息为空，则设置为默认值
		    params.pageSize = this.pagination.defaultPageSize
		    params.pageNum = this.pagination.defaultCurrent
		  }
		  this.$post('/currency/currencyList', {
		    ...params
		  }).then((r) => {
		    let data = r.data
		    const pagination = { ...this.pagination }
		    pagination.total = data.total
		    this.dataSource = data.rows
		    this.pagination = pagination
		    // 数据加载完毕，关闭loading
		    this.loading = false
		  })
		}
	}
}
</script>

<style lang="less" scoped>
@import "../../../../static/less/Common";
</style>
